<script setup>

import ChartCard from "@/views/portal/chartCard/ChartCard.vue";

const chartList = computed(()=> {

  return [{
    title: '资产状态分布',
    groupBy: 'state',
    chartType: 'pie',
  }, {
    title: '资产种类分布',
    groupBy: 'category_id',
    chartType: 'bar',
  }, {
    title: '资产仓库分布',
    groupBy: 'warehouse_id',
    chartType: 'bar',
  }]
});

</script>

<template>
  <div style="width: 100%;">
    <el-row class="pl20 pr20 pb20 pt20" :gutter="10">

      <!-- 资产状态分布图   -->
<!--      <asset-state-distribute-chart-card></asset-state-distribute-chart-card>-->


      <ChartCard v-for="c in chartList" :title="c.title" :group-by="c.groupBy" :name-mapping="c.nameMapping" :chart-type="c.chartType"></ChartCard>
      <!-- 资产种类分布图   -->
<!--      <asset-category-distribute-chart-card></asset-category-distribute-chart-card>-->
<!--      &lt;!&ndash; 资产仓库分布图   &ndash;&gt;-->
<!--      <asset-warehouse-distribute-chart-card></asset-warehouse-distribute-chart-card>-->
<!--      &lt;!&ndash; 耗材领用情况   &ndash;&gt;-->
<!--      <consume-use-chart-card></consume-use-chart-card>-->
<!--      &lt;!&ndash; 耗材入库情况  &ndash;&gt;-->
<!--      <consume-in-chart-card></consume-in-chart-card>-->

      <!-- 这些报表还没有数据先不做 -->
      <!--          <el-col :span="8">-->
      <!--            <el-card shadow="always" style="padding-bottom: 20px;font-size: 14px">-->
      <!--              <h4 style="color:#0b1019 ; display: flex; justify-content: center; align-items: center;">-->
      <!--                耗材入库情况-->
      <!--&lt;!&ndash;                <button class="quantity-button" @click="showQuantity('consumableInbound')">数量</button>&ndash;&gt;-->
      <!--&lt;!&ndash;                <button class="amount-button" @click="showAmount('consumableInbound')">金额</button>&ndash;&gt;-->
      <!--              </h4>-->
      <!--              <VueEcharts :option="consumableInboundOption" style="height: 400px"></VueEcharts>-->
      <!--            </el-card>-->
      <!--          </el-col>-->
      <!--          <el-col :span="8">-->
      <!--            <el-card shadow="always" style="padding-bottom: 20px;font-size: 14px">-->
      <!--              <h4 style="color:#0b1019 ; display: flex; justify-content: center; align-items: center;">-->
      <!--                资产位置统计-->
      <!--                <button class="quantity-button" @click="showQuantity('assetLocation')">数量</button>-->
      <!--                <button class="amount-button" @click="showAmount('assetLocation')">金额</button>-->
      <!--              </h4>-->
      <!--              <VueEcharts :option="assetLocationOption" style="height: 400px"></VueEcharts>-->
      <!--            </el-card>-->
      <!--          </el-col>-->
      <!--          <el-col :span="8">-->
      <!--            <el-card shadow="always" style="padding-bottom: 20px;font-size: 14px">-->
      <!--              <h4 style="color:#0b1019 ; display: flex; justify-content: center; align-items: center;">-->
      <!--                部门使用占比-->
      <!--                <button class="quantity-button" @click="showQuantity('departmentUsage')">数量</button>-->
      <!--                <button class="amount-button" @click="showAmount('departmentUsage')">金额</button>-->
      <!--              </h4>-->
      <!--              <VueEcharts :option="departmentUsageOption" style="height: 400px"></VueEcharts>-->
      <!--            </el-card>-->
      <!--          </el-col>-->
    </el-row>
  </div>
</template>

<style scoped lang="scss">

</style>